<template>
  <div >
    <div class="form">
      <div class="item">
        <label for="name">姓名：</label>
          <input v-model="name" type="text" id="name" name="name">
      </div>

      <div class="item">
        <label for="age">年龄：</label>
        <input v-model="age" type="number" id="age" name="age" value="0" unit="岁">
      </div>

      <div class="item">
        <label for="height">身高：</label>
        <input v-model="height" type="number" id="height" name="height" value="0" unit="米"> （米）
      </div>

      <div class="item">

        <label for="weight">体重：</label>
        <input v-model="weight" type="number" id="weight" name="weight" value="0" unit="公斤"> （公斤）
      </div>

      <div class="item">
        <label for="medicalHistory">病史：</label>
        <textarea v-model="medicalHistory" id="medicalHistory" name="medicalHistory"></textarea>
      </div>

        <button @click="submit" type="submit">诊断</button>

        <p v-show="isShow">患者{{name}}的健康情况为{{result}}</p>
    </div>

  </div>
</template>

<script >
export default {
  data() {
    return {
      name: '',
      age: '',
      height: '',
      weight: '',
      medicalHistory: '',
      result: '',
      isShow: false
    }
  },
  methods: {
    submit() {
      // 提交表单
      // 1. 获取表单数据
      console.log(this.weight);
      console.log(this.height*this.height)
      if (this.name === '' || this.age === '' || this.height === '' || this.weight === '')return alert('请填写完整信息') 
      this.isShow = true
      const res = this.weight / (this.height * this.height)
      if (res > 29.9) {
        this.result =  '肥胖'
      } else if (res >24.9){
        this.result = '过重'
      } else if (res >18.5){
        this.result = '正常'
      } else {
        this.result = '过轻'
      }
    }
  }
}
</script>

<style>

.form {
  width: 300px;
  display: flex;
  flex-direction: column;
}

.item {
  font-weight: 700;
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
button{
  width:50px
}
</style>
